import { FC } from 'react'
// 第三方插件，如果有报错，需要单独下载types注解文件；
import styled from 'styled-components'
import { Button } from 'antd'

const MyToastWrapper = styled.div`
  width: 100vw;
  height: 100vh;
  position: fixed;
  display:flex;
  justify-content: center;
  align-items:center;
  .mask {
    width: 100%;
    height: 100%;
    position: absolute;
    background: #000;
    opacity: .5;
  }
  .tip {
    width: 50%;
    height: 50%;
    background: #fff;
    z-index: 10;
  }
`;
// css in js

// 谁接收，谁注解（类型）
// 回调函数没有return

interface MytotasProps {
  message?: string, // ? 可传可不传
  handleTestBtn?: () => void // void 空
  // handleTestBtn?():void
}

const MyToast:FC<MytotasProps> = (props) => {
  const { handleTestBtn, message } = props;
  return <MyToastWrapper>
     <div className="mask"></div>
     <div className="tip">
       {message}
       {/* <Button onClick={handleTestBtn}>确定</Button> */}
       {/* <Button onClick={() => {
         handleTestBtn && handleTestBtn()
       }}>确定</Button> */}
     </div>
  </MyToastWrapper>
}

// 函数组件设置默认值
MyToast.defaultProps = {
  message: 'hello world'
}

export default MyToast;